<template>
    <div class="aiSource">
        <div class="icon"></div>
        <div class="back">
            <div class="titleBar">
              <div class="title">AI教学资料生成</div>
              <div class="title2">AI一下，让备课更简单</div>
            </div>
            <div class="hint">请在上方搜索框中输入你需要的教学资料的 
              <div class="hint2">主题，类型，数量，目的</div>等
            </div>
            <div class="example">
                <input
                   v-model="input"
                   placeholder="课程主题，教学目标，课程时长，学科"
                   @input=""
                   class="example-input"
                />
            </div>
            <div class="hint3">或者在下方选择一些教学设计关键词和选项</div>
            <div class="select-board">
                <div v-for="item in values" :key="item.id" style="margin-right: 60px;">
                    <div class="select-wrapper">
                      <select v-model="item.prop" class="selector" :placeholder="item.placeholder" @click="updateSearchInput">
                        <option disabled selected :label="item.placeholder" value=""/>
                        <option
                            v-for="selectBar in item.arr"
                            :key="selectBar.id"
                            :label="selectBar.label"
                            :value="selectBar.label"
                        />
                      </select>
                    </div>
                </div>
            </div>
        </div>
        <el-button color="rgb(232, 198, 245)" round class="back-button" @click="backUp">返回</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { arr1, arr2, arr3, arr4, arr5 } from './components/arr';
import { useSearchStore } from '@/stores/search';
import { useRouter } from 'vue-router';
const searchStore = useSearchStore()
const router = useRouter()
const input = ref('比如输入"给我三个关于集合的教学预习视频，适合高一学生学习的，较为简单的视频"')
const form = ref({
    topic: '',
    type: '',
    nums: '',
    grade: '',
    more: ''
})
const values = ref([
    {
        id: 1,
        prop: form.value.topic,
        placeholder: '资料主题',
        arr: arr1
    },
    {
        id: 2,
        prop: form.value.type,
        placeholder: '资料类型',
        arr: arr2
    },
    {
        id: 3,
        prop: form.value.nums,
        placeholder: '资料数量',
        arr: arr3
    },
    {
        id: 4,
        prop: form.value.grade,
        placeholder: '教学年级',
        arr: arr4
    },
    {
        id: 5,
        prop: form.value.more,
        placeholder: '更多',
        arr: arr5
    }
])
const updateSearchInput = () => {
    let info = '';
    values.value.forEach(item => {
        if (item.id === 1) {
            searchStore.planForm.topic = item.prop;
        } else if (item.id === 2) {
            searchStore.planForm.target = item.prop;
        } else if (item.id === 3) {
            searchStore.planForm.time = item.prop;
        } else if (item.id === 4) {
            searchStore.planForm.grade = item.prop;
        }
        if (item.prop) {
            info += `${item.placeholder}: ${item.prop}, `;
        }
    });
    info = info.replace(/,\s*$/, '');
    searchStore.searchInput = info;
};
function backUp(){
   router.push('/')
}
</script>

<style scoped lang="less">
@import url('@/views/lesson-source/index.less');
</style>